<template>
    <div class=" bg-f">
    <div class="btn-outer" :class="{step3:step3}">
      <div class="btn-right" >
        <div class="right-circle" :class="{step1:step1}"></div>
      </div>
      <div class="btn-left" >
        <div class="left-circle" :class="{step2:step2}"></div>
      </div>
      <div class="btn-inner" @click="showModal">    
        <p class="step-text" v-text="textInput"></p>
      </div>
    </div>
    <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight" mode="out-in">
    <cmodel v-if="modal" :step='childstep' @colsecmodal='hideModal'></cmodel>
    </transition>
  </div>
</div>
</template>
<script>
  import CModal from './Cmodal.vue'
  import config from '../config'



  export default {
    data () {
    return{
      step1:false,
      step2:false,
      step3:false,
      textInput:'点击签到',
      modal:false,
      childstep:false,
      realName:'',
      idCardNum:''
     }
    },
    mounted() {
     let signObj = config.getSignObj();
     const id = this.$route.query.id;
      if(signObj.hasOwnProperty('id' + id)) {
        this.$router.push({path:'/chartDetail?id='+id});
      }
    },
    methods:{
      changeStep(){
        if(this.step1){
          if(!this.step2){
            this.step2=true;
            this.step3=true;
            this.textInput="点击签到"
          }
        }else{
          this.step1=true
          this.childstep=true
          this.textInput="还差一步"
        }
      },
      showModal() {
        const { idCardNum, realName } = this;
        const { base } = this.config;
        if(this.step3==true){
              localStorage.user = realName;
              localStorage.idCardNum = idCardNum;
              localStorage.userid = result.id;
              localStorage.token = result.token;
              const id = this.$route.query.id;
              config.setSignObj('id' + id)
              this.$vux.toast.show({ text: '签到成功' })
              this.textInput="再试一次";
              this.$router.push({path:'/chartDetail'});
            this.step1=false;
            this.step2=false;
            this.step3=false;
            this.$vux.loading.hide()
        }else{
          this.modal=true;
        }
        
      },
      hideModal(msg) {
        this.modal=false;
        msg.idCardNum ? 
        this.idCardNum = msg.idCardNum
        :
        this.realName = msg.realName
        this.changeStep();
      }
    },
    components:{
      cmodel:CModal
    }
         	
  }

</script>
<style scoped>
.bg-f{
  background:-webkit-radial-gradient(ellipse closest-side,#fff,#00A4FF 20%,#fff);
  background:radial-gradient(circle farthest-side,#fff ,#35495E 20%,#fff 35%,#35495E 40%);
  width:100%;
  height:100vh;
  text-align:center;
}
.btn-outer{
  border-radius:50%;
  font-size:0;
  width:50vw;
  height:50vw;
  position:fixed;
  margin-top:-25vw;
  margin-left:-25vw;
  top:50%;left:50%;
  overflow:hidden;
  transition:all 2s;
  transform-origin:50% 50%;
  

}
.btn-outer.step3{
  -webkit-animation:translate_both 2s forwards;
  animation-delay:1s;
}
.btn-right,.btn-left{width:25vw;height:50vw;position:absolute;z-index:1;overflow:hidden;}
.btn-right{right:0;}.btn-left{left:0;}
.right-circle,.left-circle{position:absolute;border-radius:50%;height:100%;width:200%;border:3vw solid transparent;top:0;box-sizing: border-box;}
.right-circle{border-top-color:rgba(12, 12,25, 0.5);border-right-color:rgba(12, 12,25, 0.5);right:0;-webkit-transform:rotate(-135deg);}
.right-circle.step1{
  -webkit-animation:rotate_right 3s forwards;
}
.left-circle{border-top-color:rgba(12, 12,25, 0.5);border-left-color:rgba(12, 12,25, 0.5);left:0;-webkit-transform:rotate(-225deg);}
.left-circle.step2{-webkit-animation:rotate_left 2s forwards;}
.btn-inner{
  background:rgba(12, 12,25, 0.5);
  border-radius:50%;
  width:40vw;
  height:40vw;
  position:absolute;
  top:50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  z-index:2;
}
@-webkit-keyframes translate_both{
  30%{
    background:rgba(12, 12,25, 0.9);
    
  }
  50%{
    background:rgba(12, 12,25, 0.9);
    -webkit-transform: scale(0.1, 0.1) rotateY(90deg);
    }
  100%{
    background:rgba(12, 12,25, 0.9);
       -webkit-transform: scale3d(1, 1, 1);   
      }
}
 @-webkit-keyframes rotate_right{
      0%{
          -webkit-transform: rotate(-135deg);
      }
      50%,100%{
          -webkit-transform: rotate(45deg);
      }
  }
@-webkit-keyframes rotate_left{
    0%{
        -webkit-transform: rotate(-225deg);
    }
    50%,100%{
        -webkit-transform: rotate(-45deg);
    }
}
.step-text{
  line-height:40vw;
  font-size:20px;
  color:#fff;
}
</style>